<template>
    <div id="container">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">基础信息管理</template>
                <el-menu-item index="1-1"><router-link to="/admin/basic">管理员信息维护</router-link></el-menu-item>
            </el-submenu>
            <el-submenu index="2" v-if="this.$store.state.login.type === 4">
                <template slot="title">用户管理</template>
                <el-menu-item index="2-1"><router-link to="/admin/user_admin">用户管理</router-link></el-menu-item>
                <el-menu-item index="2-2"><router-link to="/admin/certification_audit">认证审核</router-link></el-menu-item>
            </el-submenu>
            <el-submenu index="3" v-if="this.$store.state.login.type === 3">
                <template slot="title">资产管理</template>
                <el-menu-item index="3-1"><router-link to="/admin/warehousing">资产入库审核</router-link></el-menu-item>
                <el-menu-item index="3-2"><router-link to="/library/root">资产管理</router-link></el-menu-item>
            </el-submenu>
            <el-menu-item index="4" v-if="this.$store.state.login.type === 4"><router-link to="/admin/backup">系统数据备份</router-link></el-menu-item>
            <div id="user-info">
                {{this.$store.state.login.username ? '欢迎您，'+this.$store.state.login.username : '未登录'}}&nbsp;&nbsp;&nbsp;
                <span @click="logout" id="logout" @clikc="logout">注销</span>
            </div>
        </el-menu>
        <el-main id="main">
            <router-view></router-view>
        </el-main>
        <my-footer></my-footer>
    </div>
</template>

<script>
import MyFooter from '../../components/MyFooter.vue'
export default {
    name:'Admin',
    data(){
        return{
            activeIndex: '1'
        }
    },
    components:{MyFooter},
    methods:{
        logout:function(){
            this.$store.commit('clearToken');
            this.$router.push({ path: '/'});
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    width: 100%;
    background-color: #eee;
    min-width: 950px;
    #user-info{
        width:200px;
        // background-color: gray;
        display: block;
        margin-top:20px;
        float:right;
        color: #fff;
        #logout{
            text-decoration: underline;
        }
        #logout:hover{
            color: hotpink;
            cursor: pointer;
        }
    }
    #main{
        width:70%;
        min-height: 500px;
        margin-left: 15%;
        margin-right: 15%;
        margin-top:30px;
        margin-bottom:30px;
        background-color: #fff;
        box-sizing: border-box;
        padding:50px;
    }
}
</style>